<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table {
        font-family: Arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    table td, table th {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
    }

    table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    table tr:hover {
        background-color: #dddddd;
    }

    table th {
        background-color: #4CAF50;
        color: white;
    }

    h2 {
        font-size: 20px;
        color: #333;
    }

    input, select {
        width: 200px;
        margin-bottom: 10px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    button {
        padding: 5px 10px;
        margin-right: 10px;
        border: none;
        border-radius: 3px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    #del {
        background-color: #db5860;
    }

    #edit {
        background-color: #f7a36f;
    }
</style>
<body>

<div id="app">
    <div>
        <button @click="showAdd()">添加员工</button>
        <label>姓名：</label>
        <input type="text" v-model="username" placeholder="请输入员工姓名">

        <label>部门：</label>
        <select v-model="det">
            <option value="">请选择您的岗位</option>
            <option v-for="d in depList" :value="d.id">{{d.name}}</option>
        </select>
        <button @click="getByName()">搜索</button>
    </div>
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>入职时间</td>
            <td>地址</td>
            <td>所属部门</td>
            <td>操作</td>
        </tr>
        <tr v-for="e in empList">
            <td>{{e.id}}</td>
            <td>{{e.username}}</td>
            <td>{{e.age}}</td>
            <td>{{e.sex}}</td>
            <td>{{e.createTime}}</td>
            <td>{{e.address}}</td>
            <td>{{e.name}}</td>
            <td>
                <button id="edit" @click="showEdit(e)">编辑</button>
                <button id="del" @click="del(e.id)">删除</button>
            </td>
        </tr>
    </table>

    <div v-show="edit">
        <h2>编辑</h2>
        用户名：<input v-model="empInfo.username" placeholder="用户名"><br>
        年龄： <input v-model="empInfo.age" placeholder="年龄"><br>
        性别： <input v-model="empInfo.sex" placeholder="性别"><br>
        地址： <input v-model="empInfo.address" placeholder="地址"><br>
        岗位：
        <select v-model="empInfo.depId">
            <option value="">请选择部门</option>
            <option v-for="d in depList" :value="d.id">{{d.name}}</option>
        </select>
        <div>
            <button @click="editEmp()">提交</button>
            <button @click="edit = false">关闭</button>
        </div>
    </div>

    <div v-show="add">
        <h2>添加</h2>
        用户名：<input v-model="emp.username" placeholder="用户名"><br>
        年龄： <input v-model="emp.age" placeholder="年龄"><br>
        性别： <input v-model="emp.sex" placeholder="性别"><br>
        地址： <input v-model="emp.address" placeholder="地址"><br>
        岗位： <select v-model="emp.depId">
        <option value="">请选择部门</option>
        <option v-for="d in depList" :value="d.id">{{d.name}}</option>
    </select>
        <div>
            <button @click="addEmp()">提交</button>
            <button @click="add = false">关闭</button>
        </div>

    </div>
</div>

</body>
</html>

<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            empList: [],
            depList: [],
            empNameList: [],
            username: "",
            det: "",
            emp: {},
            empInfo: {},
            add: false, //默认隐藏
            edit: false, //默认隐藏

        },
        methods: {

            // 获取员工列表
            empLists() {
                axios.get("/getAllEmp").then(res => {
                    console.log(res.data)
                    this.empList = res.data
                })
            },

            //获取岗位列表
            depLists() {
                axios.get("/getAllDep").then(res => {
                    console.log(res.data)
                    this.depList = res.data
                })
            },

            //根据姓名模糊查询
            getByName() {
                console.log(this.det)
                axios.get("/getByName", {
                    params: {
                        username: this.username,
                        det: this.det
                    }
                }).then(res => {
                    console.log(res.data)
                    this.empList = res.data
                })
            },

            //删除员工
            del(id) {
                if (confirm("您确定要删除这个员工吗？")) {
                    axios.get("/delete/" + id).then(res => {
                        if (res.status == 200) {
                            alert("删除成功！！！")
                            this.empLists();
                        }
                    })
                }
            },

            //修改员工
            editEmp() {
                console.log(this.empInfo);
                axios.put("/update", this.empInfo).then(res => {
                    if (res.status == 200) {
                        this.edit = false;
                        this.empLists();
                    }
                })
            },

            //添加员工
            addEmp() {
                console.log(this.emp);
                axios.post("/insert", this.emp).then(res => {
                    if (res.status == 200) {
                        // this.goodsInfo = {};
                        this.add = false;
                        this.empLists();
                    }
                })
            },

            //展示添加窗体
            showAdd() {
                this.add = true;
            },

            //展示修改窗体
            showEdit(e) {
                this.empInfo = JSON.parse(JSON.stringify(e));
                this.edit = true;
            },
        },

        created() {
            this.empLists();
            this.depLists();
        }
    })
</script>
